<template>
    <div>
      <v-card>
        <v-card-title>
          <v-row>
            <v-col cols="12" sm="6" md="4">
              <v-select
                v-model="logType"
                :items="logTypes"
                label="日志类型"
                clearable
              />
            </v-col>
            <v-col cols="12" sm="6" md="4">
              <v-select
                v-model="logStatus"
                :items="logStatuses"
                label="状态"
                clearable
              />
            </v-col>
            <v-col cols="12" sm="6" md="4">
              <v-text-field
                v-model="search"
                append-icon="mdi-magnify"
                label="搜索"
                single-line
                hide-details
                clearable
              />
            </v-col>
          </v-row>
        </v-card-title>
        
        <v-data-table
          :headers="headers"
          :items="filteredLogs"
          :search="search"
          :loading="loading"
          :items-per-page="20"
          multi-sort
        >
          <template v-slot:item.status="{ item }">
            <v-chip :color="getStatusColor(item.status)">
              {{ item.status }}
            </v-chip>
          </template>
          
          <template v-slot:item.details="{ item }">
            <v-btn
              icon
              size="small"
              @click="showLogDetails(item)"
            >
              <v-icon>mdi-information-outline</v-icon>
            </v-btn>
          </template>
        </v-data-table>
      </v-card>
      
      <v-dialog v-model="detailsDialog" max-width="800px">
        <v-card>
          <v-card-title>日志详情</v-card-title>
          <v-card-text>
            <v-simple-table>
              <template v-slot:default>
                <tbody>
                  <tr v-for="(value, key) in selectedLog" :key="key">
                    <td class="font-weight-bold">{{ key }}</td>
                    <td>{{ value }}</td>
                  </tr>
                </tbody>
              </template>
            </v-simple-table>
          </v-card-text>
          <v-card-actions>
            <v-spacer />
            <v-btn color="primary" @click="detailsDialog = false">关闭</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import { useDataStore } from '@/stores/data'
  
  const dataStore = useDataStore()
  const loading = ref(false)
  const search = ref('')
  const logType = ref('')
  const logStatus = ref('')
  const detailsDialog = ref(false)
  const selectedLog = ref({})
  
  const logTypes = ['text', 'image', 'system', 'error']
  const logStatuses = ['success', 'warning', 'error', 'info']
  
  const headers = [
    { title: '时间', key: 'timestamp' },
    { title: '类型', key: 'type' },
    { title: '状态', key: 'status' },
    { title: '消息', key: 'message' },
    { title: '详情', key: 'details', sortable: false }
  ]
  
  const logs = ref([])
  
  onMounted(async () => {
    loading.value = true
    await dataStore.fetchLogs()
    logs.value = dataStore.logs
    loading.value = false
  })
  
  const filteredLogs = computed(() => {
    return logs.value.filter(log => {
      return (
        (!logType.value || log.type === logType.value) &&
        (!logStatus.value || log.status === logStatus.value)
      )
    })
  })
  
  function getStatusColor(status: string) {
    switch (status) {
      case 'success': return 'success'
      case 'warning': return 'warning'
      case 'error': return 'error'
      default: return 'info'
    }
  }
  
  function showLogDetails(item: any) {
    selectedLog.value = { ...item }
    detailsDialog.value = true
  }
  </script>